<script lang="ts" setup name="testComponent">
import type { FileInfo } from '@/index.d';
import { deleteFileInfo, getFileInfoByKeyWord, useLoginUserStore } from '@/index';
import {
  ElInput,
  genFileId,
  type UploadFile,
  type UploadFiles,
  type UploadInstance,
  type UploadProgressEvent,
  type UploadRawFile,
  type UploadUserFile
} from 'element-plus';

const upload = useTemplateRef<UploadInstance>('upload');
const { loginUser } = useLoginUserStore();
const fileList = ref<UploadUserFile[]>([]);
const headers = { Authorization: loginUser.token };
const extraData: FileInfo = {
  keyWord: 'yinhongqitupiantest'
};
const imageUrl = ref<string>();
const handlePreview = (uploadFile: UploadFile) => {
  // window.open(uploadFile.url, '_blank');
};

const handleRemove = async (uploadFile: UploadFile, _uploadFiles: UploadFiles) => {
  deleteFileInfo('physicalDeleteByUid', uploadFile.uid);
  imageUrl.value = undefined;
};

const handleSuccess = (response: FileInfo, uploadFile: UploadFile, _uploadFiles: UploadFiles) => {
  imageUrl.value = response.url;
  uploadFile.url = response.url;
  uploadFile.uid = response.uid as number;
};

const handleError = (_error: Error, _uploadFile: UploadFile, _uploadFiles: UploadFiles) => {};

const handleProgress = (
  evt: UploadProgressEvent,
  _uploadFile: UploadFile,
  _uploadFiles: UploadFiles
) => {
  if (evt.percent > 90) {
    evt.percent = 90;
  }

  // console.log('handleProgress', uploadFile);
};

const handleChange = (_uploadFile: UploadFile, _uploadFiles: UploadFiles) => {
  // console.log('handleChange', uploadFiles.length);
};

const handleExceed = (files: File[], _uploadFiles: UploadUserFile[]) => {
  upload.value!.clearFiles();
  fileList.value.pop();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
  upload.value!.submit();
};

const handleBeforeUpload = (rawFile: UploadRawFile) => {
  extraData.creatorId = loginUser.id;
  extraData.name = rawFile.name;
  extraData.size = rawFile.size;
  extraData.uid = rawFile.uid;
  extraData.type = rawFile.type;
};

const initFileList = async () => {
  const res = await getFileInfoByKeyWord('yinhongqitupiantest');
  if (res) {
    const uploadUserFile: UploadUserFile = {
      name: res?.name as string,
      uid: res.uid as number,
      url: res?.url,
      size: res.size,
      status: 'success',
      response: res
    };
    imageUrl.value = res.url;
    fileList.value.length = 0;
    fileList.value.push(uploadUserFile);
  }
};

onMounted(async () => {
  initFileList();
});

const deleteImage = () => {
  upload.value?.clearFiles();
  console.log(upload.value);
};
const inputVal = ref<string>('');

const inputArea = useTemplateRef<InstanceType<typeof ElInput>>('inputArea');
const ctlInput = () => {
  if (inputArea.value != null) {
    console.log(inputArea.value.input);
    inputArea.value.select();
    setTimeout(() => {
      inputArea.value != null && inputArea.value.clear();
    }, 3000);
  }
};
</script>
<template>
  <el-button @click="ctlInput">清空输入框</el-button> <br />
  <br />
  {{ inputVal }} <br />
  <br />
  <el-input v-model="inputVal" ref="inputArea" />
  <br />
  <br />
  <el-upload
    v-model:file-list="fileList"
    ref="upload"
    action="/api/base/file/fileInfo/uploadOne"
    :limit="1"
    :data="extraData"
    :headers="headers"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :before-upload="handleBeforeUpload"
    :show-file-list="true"
    accept="jpg,png,gif,jpeg"
    v-bind="$attrs"
  >
    <template #trigger><el-button type="primary">点击上传</el-button></template>
    <template #tip><el-button @click="deleteImage" type="danger">删除图片</el-button></template>
  </el-upload>
  <br />
  <!-- <el-table :data="fileList" v-if="fileListDetail">
    <el-table-column label="name" :min-width="300">
      <template #default="{ row }">
        <el-link type="primary" :href="row.url" target="_blank">{{ row.name }}</el-link>
      </template>
    </el-table-column>
    <el-table-column label="uid" prop="uid" />
    <el-table-column label="size" prop="size" />
  </el-table> -->
  <el-image style="max-width: 500px; max-height: 500px" :src="imageUrl" alt="没有图片" />
</template>
<style lang="scss" scoped>
:deep(.el-upload-list) {
  > li {
    height: 30px;
    line-height: 30px;
  }
}
</style>
